<template>
    <div class="ancient-poetry">
        <div class="word">
            <h2 class="quotes">
                <template v-for="(item, index) in [...String(ancientPoetry?.quotes)]" :key="index">
                    <span>{{ item }}</span>
                </template>
            </h2>
            <div class="info">
                <span>「{{ ancientPoetry?.title }}」</span><span class="author">{{ ancientPoetry?.author }}</span>
            </div>
        </div>

        <div class="container full-text">
            <!--      <h1 class="title">全文</h1>-->
            <h2 class="title-ancient-poetry">{{ ancientPoetry?.title }}</h2>
            <div class="author">{{ ancientPoetry?.dynasty }}・{{ ancientPoetry?.author }}</div>
            <div class="content ancient-poetry-content">
                <template v-for="(item, index) in ancientPoetry?.content.split('\n')" :key="index">
                    <p>{{ item }}</p>
                </template>
            </div>
        </div>

        <div class="container">
            <h1 class="title">「译文」</h1>
            <div class="content">
                <template v-for="(item, index) in ancientPoetry?.translate.split('\n')" :key="index">
                    <p>{{ item }}</p>
                </template>
            </div>
        </div>

        <div class="container">
            <h1 class="title">「注释」</h1>
            <div class="content">
                <template v-for="(item, index) in ancientPoetry?.annotation.split('\n')" :key="index">
                    <p>{{ item }}</p>
                </template>
            </div>
        </div>

        <div class="container">
            <h1 class="title">「序」</h1>
            <div class="content">
                <template v-for="(item, index) in ancientPoetry?.reviews.split('\n')" :key="index">
                    <p>{{ item }}</p>
                </template>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { useHomeStore } from "@/store/home";
    import { computed, ref } from "vue";

    const homeStore = useHomeStore();

    const ancientPoetry = computed(() => homeStore.ancientPoetryData);
</script>

<style scoped>
    .ancient-poetry {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        padding: 0 20px;
        background-color: rgba(209, 207, 185, 0.7);
        font-family: KaiTi;
        color: #000000;
    }
    .word {
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
        align-items: center;
        height: 30vh;
        width: 100%;
        margin-bottom: 30px;
        padding: 0 10px;
        border-radius: 5px;
        background-color: white;
    }
    .word .quotes {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        width: 100%;
        margin-bottom: 20px;
    }
    .quotes span {
        /*flex: 1;*/
        /*margin-right: 2px;*/
        letter-spacing: 2px;
    }
    @media only screen and (max-width: 539px) {
        .quotes {
            font-size: 20px;
        }
    }
    @media only screen and (min-width: 539px) {
        .quotes {
            font-size: 30px;
        }
    }
    .info {
        font-size: 14px;
    }
    .info .author {
        background-color: #c20000;
        border-radius: 3px;
        color: white;
        letter-spacing: -1px;
        padding: 1px 1px;
    }

    .container {
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        margin-top: 30px;
        padding: 10px 10px;
        border-radius: 5px;
        background-color: white;
    }
    .container h1 {
        font-size: 14px;
        color: #222;
    }

    .title {
        align-self: flex-start;
    }

    .content {
        margin-top: 10px;
    }

    .content p {
        padding: 0 5px;
        margin-bottom: 15px;
        line-height: 26px;
    }
    .full-text {
        padding: 20px 10px;
    }
    .full-text .title-ancient-poetry {
        font-size: 20px;
        letter-spacing: 2px;
    }
    .full-text .author {
        margin-top: 10px;
        font-size: 14px;
        color: #222;
    }
    .ancient-poetry-content p {
        margin-bottom: 10px;
    }
</style>
